<template>
    <div class="index">       
        <div class="index-left">
            <ul>  
                <li>
                     <router-link to="./discover"><span class="iconfont icon-yinle"></span>发现音乐</router-link>
                </li>
                <li>
                     <router-link to="playlist"><span class="iconfont icon-yinleliebiao"></span>推荐歌单</router-link>
                </li>
                <li>
                     <router-link to="songs"><span class="iconfont icon-music"></span>最新音乐</router-link>
                </li>
                <li>
                     <router-link to="MV"><span class="iconfont icon-bofangMV"></span>最爱MV</router-link>
                </li>
            </ul>
        </div>
        <div class="main">
            <router-view :key="key"></router-view>
        </div>
        <!-- 播放标签 -->
    <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src='musicUrl' controls autoplay></audio>
    </div>
    </div>
</template>

<script>
import '../../assets/css/icon/iconfont.css'
export default {
    name: 'VueIndex',

    data() {
        return {
            musicUrl:''
        };
    },

    
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
    },

    methods: {
        
    },
};
</script>

<style scoped>
.index {
        /* height: 800px; */
        display: flex;
    }
    .index-left {
        width: 200px;
        min-width: 200px;
        /* background-color: #ededed; */
        text-align: center;
        border-right: 1px solid #ededed;
    }
    .index-left ul {
        list-style: none;
    }
    .index-left li {
        cursor: pointer;
        letter-spacing: .3rem;
        height: 60px;
        line-height: 60px;
        display: flex;
    }
    .index-left li:hover {
        background-color: #ededed;
    }
    .index-left a {
        text-decoration: none;
        color: #333;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 18px;
        padding-left: 30px; 
        text-align: left;  
    }
    .index-left a::before {
        margin-right: 10px;
    }
    .router-link-active {
        color: #e74c3c !important;
    }
    .main {
        flex: 1;
        min-width: 750px;
        /* height: 800px; */
        /* overflow-y: scroll; */
        /* background-color: skyblue; */
    }
/* .index-container {
  display: flex;
}

.index-container .nav {
  background-color: #ededed;
  width: 200px;
  height: 100%;
}

.index-container .nav li {
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.index-container .nav li:hover {
  background-color: #e7e7e7;
}

.index-container .nav li .iconfont {
  margin-right: 10px;
  font-size: 20px;
}

.index-container .nav li a {
  color: black;
  padding-left: 30px;
  font-size: 18px;
  line-height: 60px;
  width: 100%;
  height: 100%;
}

.index-container .nav li a.router-link-active {
  color: #dd6d60;
}

.index-container .nav li a.router-link-active .iconfont {
  color: #dd6d60;
}

.index-container .main {
  flex: 1;
  overflow-y: scroll;
  padding: 10px 20px;
}

.index-container .main > div {
  max-width: 1100px;
  margin: 0 auto;
}
*/
.index .player {
  background: #f1f3f4;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.index audio {
  width: 100%;
  border-radius: none;
  outline: none;
} 
</style>